<template>
  <div id="live2d-wrapper" :style="!show ? 'width:0' : ''">
    <div class="website-tools">
      <span class="toggle" @click="show = !show">{{ show ? "隐" : "显" }}</span>
      <ColorPicker
        v-model="color"
        defaultColor="#ef7c1e"
        v-on:change="headleChangeColor"
      />
      <span class="toggle" @click="checkModel(1)">{{
        showBan ? "隐" : "板"
      }}</span>
    </div>
    <div v-show="show && showBan" class="shuoshuo">
      <span :title="kanBanText">{{ kanBanText }}</span>
    </div>
    <canvas
      v-show="show"
      id="live2d"
      width="280"
      height="250"
      @mouseover="sayBaka"
    ></canvas>
  </div>
</template>

<script>
import ColorPicker from "../ColorPicker";
import Tips from "./tips.json";
export default {
  name: "Live2d",
  components: { ColorPicker },
  computed: {},
  data() {
    return {
      show: true,
      showBan: true,
      color: "#ef7c1e",
      kanBanText: "",
      timer: null,
    };
  },
  mounted() {
    import("./live2d.min.js").then(() => {
        loadlive2d("live2d", this.$withBase("/live2d/model_muted.json"));
    });
    this.$nextTick(() => {
      window.addEventListener("copy", () => {
        this.kanBanText = "你都复制了些什么呀，转载要记得加上出处哦";
      });
    });
    // build 时 navigator is not defined问题
    // https://my.oschina.net/xuedingmiaojun/blog/4641481
    const themeColor = localStorage.getItem("themeColor") || "#ef7c1e";
    if (themeColor) this.headleChangeColor(themeColor);
    this.color = themeColor;
    this.sayHello();
    this.timer = setInterval(() => {
      this.sayHitokoto();
    }, 10000);
    this.$router.afterEach(() => {
      switch (this.$route.path) {
        case "/we.html":
          this.kanBanText = "不来好好认识下我家的小可爱们吗~~~~~";
          break;
        case "/post/":
          this.kanBanText = "今天想从哪篇文章开始读呢~~~~~";
          break;
        case "/exp.html":
          this.kanBanText =
            "塞卡卡说，要想写好 markdown ，就要好好阅读示例哦~~~~~";
          break;
      }
      this.isMobileHeaderOpen = false;
    });
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    headleChangeColor(e) {
      const style = document.body.style;
      style.setProperty("--main-color", e);
      localStorage.setItem("themeColor", e);
    },
    sayHello() {
      var now = new Date().getHours();
      if (now > 23 || now <= 5) {
        this.kanBanText = "这么晚啦，只有本宝宝还在陪着你啦~";
      } else if (now > 5 && now <= 7) {
        this.kanBanText = "早上好！一日之计在于晨，美好的一天就要开始咯~";
      } else if (now > 7 && now <= 11) {
        this.kanBanText = "上午好！工作顺利嘛，不要久坐，多起来走动走动哦！";
      } else if (now > 11 && now <= 14) {
        this.kanBanText = "中午了，工作了一个上午，现在是午餐时间，要吃好哦！";
      } else if (now > 14 && now <= 16) {
        this.kanBanText = "午后很容易犯困呢，今天的运动目标完成了吗？";
      } else if (now > 16 && now <= 19) {
        this.kanBanText =
          "傍晚了！窗外夕阳的景色很美丽呢，当然再美美不过下班路!";
      } else if (now > 19 && now <= 21) {
        this.kanBanText = "晚上好，今天过得怎么样？有没有想我呢？";
      } else if (now > 21 && now <= 23) {
        this.kanBanText = "已经这么晚了呀，要早点休息哦~";
      } else {
        this.kanBanText = "嗨~ 快来逗我玩吧！";
      }
    },
    sayBaka() {
      let randomCount = Math.floor(Math.random() * Tips.live2d.length);
      this.kanBanText = Tips.live2d[randomCount];
    },
    sayHitokoto() {
      console.log("sayHitokoto");
      let randomCount = Math.floor(Math.random() * Tips.hitokotos.length);
      let tipObj = Tips.hitokotos[randomCount];
      this.kanBanText = `${tipObj.hitokoto} - ${tipObj.source}`;
    },
    checkModel(e) {
      if (e == 1) {
        this.showBan = !this.showBan;
      }
      if (this.show) {
        loadlive2d("live2d", this.$withBase("/live2d/model_muted.json"));
      } else {
        loadlive2d("live2d", {});
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
#live2d-wrapper {
  position: fixed;
  left: 20px;
  bottom: 90px;
  width: 280px;
  height: 350px;
  z-index: 9999;

  .website-tools {
    text-align: center;
    position: absolute;
    z-index: 200;
    width: 20px;
    left: 10px;
    top: 100px;
    display: flex;
    flex-direction: column;

    .toggle {
      cursor: pointer;
      width: 20px;
      height: 20px;
      margin-bottom: 5px;
      font-size: 12px;
      line-height: 20px;
      background: var(--main-color);
      color: #fff;
    }
  }

  .shuoshuo {
    height: 90px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    font-size: 15px;
    line-height: 25px;
    padding: 0 10px;
    color: $darkTextColor;
    animation-duration: 50s;
    animation-iteration-count: infinite;
    animation-name: swing;
    animation-timing-function: ease-in-out;
    text-shadow: 0.4px 1px 2px #A5A5A5;
    display: flex;
    align-items: center;

    span {
      overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
      // display: block;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }

    &::before {
      content: '';
      width: 0;
      height: 0;
      border: 10px solid;
      position: absolute;
      top: 90px;
      left: 120px;
      border-color: rgba(255, 255, 255, 0.5) transparent transparent;
    }
  }

  canvas {
    position: absolute;
    top: 100px;
  }
}

@keyframes swing {
  2% {
    transform: translate(0.5px, -1.5px) rotate(-0.5deg);
  }

  4% {
    transform: translate(0.5px, 1.5px) rotate(1.5deg);
  }

  6% {
    transform: translate(1.5px, 1.5px) rotate(1.5deg);
  }

  8% {
    transform: translate(2.5px, 1.5px) rotate(0.5deg);
  }

  10% {
    transform: translate(0.5px, 2.5px) rotate(0.5deg);
  }

  12% {
    transform: translate(1.5px, 1.5px) rotate(0.5deg);
  }

  14% {
    transform: translate(0.5px, 0.5px) rotate(0.5deg);
  }

  16% {
    transform: translate(-1.5px, -0.5px) rotate(1.5deg);
  }

  18% {
    transform: translate(0.5px, 0.5px) rotate(1.5deg);
  }

  20% {
    transform: translate(2.5px, 2.5px) rotate(1.5deg);
  }

  22% {
    transform: translate(0.5px, -1.5px) rotate(1.5deg);
  }

  24% {
    transform: translate(-1.5px, 1.5px) rotate(-0.5deg);
  }

  26% {
    transform: translate(1.5px, 0.5px) rotate(1.5deg);
  }

  28% {
    transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
  }

  30% {
    transform: translate(1.5px, -0.5px) rotate(-0.5deg);
  }

  32% {
    transform: translate(2.5px, -1.5px) rotate(1.5deg);
  }

  34% {
    transform: translate(2.5px, 2.5px) rotate(-0.5deg);
  }

  36% {
    transform: translate(0.5px, -1.5px) rotate(0.5deg);
  }

  38% {
    transform: translate(2.5px, -0.5px) rotate(-0.5deg);
  }

  40% {
    transform: translate(-0.5px, 2.5px) rotate(0.5deg);
  }

  42% {
    transform: translate(-1.5px, 2.5px) rotate(0.5deg);
  }

  44% {
    transform: translate(-1.5px, 1.5px) rotate(0.5deg);
  }

  46% {
    transform: translate(1.5px, -0.5px) rotate(-0.5deg);
  }

  48% {
    transform: translate(2.5px, -0.5px) rotate(0.5deg);
  }

  50% {
    transform: translate(-1.5px, 1.5px) rotate(0.5deg);
  }

  52% {
    transform: translate(-0.5px, 1.5px) rotate(0.5deg);
  }

  54% {
    transform: translate(-1.5px, 1.5px) rotate(0.5deg);
  }

  56% {
    transform: translate(0.5px, 2.5px) rotate(1.5deg);
  }

  58% {
    transform: translate(2.5px, 2.5px) rotate(0.5deg);
  }

  60% {
    transform: translate(2.5px, -1.5px) rotate(1.5deg);
  }

  62% {
    transform: translate(-1.5px, 0.5px) rotate(1.5deg);
  }

  64% {
    transform: translate(-1.5px, 1.5px) rotate(1.5deg);
  }

  66% {
    transform: translate(0.5px, 2.5px) rotate(1.5deg);
  }

  68% {
    transform: translate(2.5px, -1.5px) rotate(1.5deg);
  }

  70% {
    transform: translate(2.5px, 2.5px) rotate(0.5deg);
  }

  72% {
    transform: translate(-0.5px, -1.5px) rotate(1.5deg);
  }

  74% {
    transform: translate(-1.5px, 2.5px) rotate(1.5deg);
  }

  76% {
    transform: translate(-1.5px, 2.5px) rotate(1.5deg);
  }

  78% {
    transform: translate(-1.5px, 2.5px) rotate(0.5deg);
  }

  80% {
    transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
  }

  82% {
    transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
  }

  84% {
    transform: translate(-0.5px, 0.5px) rotate(1.5deg);
  }

  86% {
    transform: translate(2.5px, 1.5px) rotate(0.5deg);
  }

  88% {
    transform: translate(-1.5px, 0.5px) rotate(1.5deg);
  }

  90% {
    transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
  }

  92% {
    transform: translate(-1.5px, -1.5px) rotate(1.5deg);
  }

  94% {
    transform: translate(0.5px, 0.5px) rotate(-0.5deg);
  }

  96% {
    transform: translate(2.5px, -0.5px) rotate(-0.5deg);
  }

  98% {
    transform: translate(-1.5px, -1.5px) rotate(-0.5deg);
  }

  0%, 100% {
    transform: translate(0, 0) rotate(0);
  }
}
</style>
